<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-04 16:18:08
 * @LastEditTime: 2019-09-16 09:25:39
 * @LastEditors: Please set LastEditors
 -->
<template>
    <view class="al_box"> 
        <!-- <camera device-position="back" flash="on" style="width: 100%; height: 450px;"></camera>
        <button type="primary" bindtap="takePhoto">拍照</button> -->
        <view class="txts" >
                <text v-if="userInfo.name">某某同学</text>
                <text v-else style="visibility:hidden">某某同学</text>
                <text v-if="userInfo.grade">{{userInfo.grade==1?'一年级':(userInfo.grade==2?'二年级':'三年级')}}</text>
                <text v-else style="visibility:hidden">-----</text>
                <image src="/static/images/paiz.png" @click="toChoosePratice"></image>
                <!-- 模拟用户点击获取用户信息 -->
                <button  open-type="getUserInfo" @getuserinfo="getUserInfo" class="model_click"></button>
        </view>
        <!-- <view class="btns"><button @click="olby">从相册选择</button><button>使用指南</button></view> -->


        
    </view>
</template>

<script>
const util = require('../../utils/util.js')
const apis = require('../../utils/api').default
export default {
    data(){
        return {
            userInfo:{}
        }
    },
    onShow(){
        this.$set(this,'userInfo',wx.getStorageSync('userInfo'))
    },

    methods:{
        // pohop:function(){
        //     console.log('pohop')
        //     wx.navigateTo({
        //         url:"/pages/picture/main"
        //     })
        // },
        // olby:function(){
        //     wx.chooseImage({  
        //         count: 1,  //最多可以选择的图片总数  
        //         sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  
        //         sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有  
        //         success: function (res) {  
        //             if(res.tempFiles[0].size > 5000000){
        //                 //   console.log('图片不能大于5M')
        //                   wx.showToast({
        //                       title:'图片不能大于5M',
        //                        icon:'none' 
        //                   })
        //               return
        //             }
        //             // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
        //             apis.upFiles({filePath:res.tempFilePaths[0],type:'',callback:function(resy){
        //                   wx.setStorageSync('loslist',resy)
        //                   wx.navigateTo({
        //                       url:"../fructify/main"
        //                   })
        //             }})
        //         }
        //     })
        // },
        toChoosePratice(){
            wx.navigateTo({
                url:'/pages/slect/main'
            })
        },
        getUserInfo(){
            const _this = this
            console.log(Boolean(wx.getStorageSync("userInfo").token))
            if(!wx.getStorageSync("userInfo").token){
                wx.login({
                    success(res){
                        const code = res.code
                        wx.getUserInfo({
                            lang:"zh_CN",
                            success(res){
                                const userInfo = res.userInfo
                                userInfo.code = code
                                apis.updateUser(userInfo,function(res){
                                    wx.setStorageSync("userInfo",res)
                                })
                                _this.toChoosePratice()
                            },
                            fail(res){
                                console.log(res)
                            }
                        })
                    }
                })
            }else{
                _this.toChoosePratice()
            }

        }
    }
}
</script>

<style lang="less" scoped>
.al_box{
  width: 100%;
}
.al_box .txts{
 text-align: center;
position: relative;
}

.al_box .txts text:nth-child(1){
  display: block;
  font-size: 48rpx;
  color: #8db2e4;
  margin: 132rpx 0 62rpx 0;
}

.al_box .txts text:nth-child(2){
  font-size: 32rpx;
  color: #070707;
  font-weight: bold;
}

.al_box .txts image{
  width: 330rpx;
  height: 330rpx;
  display: block;
  margin: 0 auto;
  margin-top: 65rpx;
  margin-bottom: 54rpx;
}

.al_box .btns{
text-align: center;
}

.al_box .btns button{
  display: inline-block;
  width: 276rpx;
  height: 72rpx;
  line-height: 72rpx;
  background: none;
  border:1px solid #0622b0;
  font-size: 32rpx;
  color: #0622b0;
}

.al_box .btns button:nth-child(1){
margin-right: 58rpx;
}

.model_click{
    background: transparent;
    display: inline-block;
    width: 330rpx;
    height: 330rpx;
    position:absolute;
    left:50%;
    bottom:0px;
    transform:translateX(-50%);
    &:after{
        border: none;
    }
}
</style>

